<template>
  <div class="top">
    <top-header :isLeft="true" title="我的收藏"> </top-header>
    <div class="kon" v-show="foodList.length == 0">
      <p>快去收藏菜谱吧</p>
    </div>
    <div class="content">
    <div v-for="(item,index) in foodList" :key="index">
    <div class="shoucang"  @click="to(item)">
      <img
       :src="getImage(item.img)"
        alt=""
      /> 
      <div class="title1">
        <p class="name">{{item.title}}</p>
        <p class="score" v-if="item.score != 0">{{item.score}}<span>分</span></p>
        <p v-else>暂无评分</p>
        <p class="author">{{item.author}}</p>
        
      </div>
       
    </div>  
  <div class="del"><button  @click="del(item)">X</button></div> 
  </div>
  </div></div>
</template>
<script>
import TopHeader from "../components/TopHeader.vue";
import { Dialog } from 'vant';
export default {
  components: { TopHeader },
  data() {
    return {
      foodList:'',
      foodtitle:'',
      show:'',
      store:'',
      name:''
    }
  },
   created() {
    this.showfood();
 
  },
   mounted() {
  
    this.store = this.$store.getters.foods;
    // console.log(this.store)
  },
  methods: {
    showfood() {
      this.$ajax.get("/mysql/shoucangselect.php",{
        params:{
          id:localStorage.id
        }
      }).then((res) => {
        console.log(res.data);
        this.foodList = res.data;

      });
    },
    getImage(url) {
      // console.log(url);
      if (url !== undefined) {
        return url.replace(
          /^(http)[s]*(\:\/\/)/,
          "https://images.weserv.nl/?url="
        );
      }
    },
    del(item){
      Dialog.confirm({
  title: '提示',
  message: '您真的确定要删除吗？',
})
  .then(() => {
    this.foodtitle = item.title
      console.log(this.foodtitle)
      this.$ajax.get('/mysql/shoucangdel.php',{
        params:{
          title:this.foodtitle
        }
      }).then((res)=>{
        console.log(res)
        this.$router.go(0);
      })
  })
  .catch(() => {
     return false; 
  });
  
    },
     to(item) {
      this.name = item.title;
      // this.author = item.content.object.author.name;
      // this.icon = item.content.object.author.image.ident;
      // this.img = item.content.object.photo;
      // this.score =item.content.object.score;
      
      // console.log(this.store);
      this.$router.push({
        name: "FoodContent",
        query: {
          store: this.store,
          name: this.name,
          // author: this.author,
          // icon:this.icon,
          // img:this.img,
          // score:this.score
        },
      });
    },
  },

};
</script>
<style lang="scss" scoped>
.kon {
  margin-top: 100px;
  text-align: center;
  font-size: 16px;
}
.content{
margin: 70px 10px 0;
}
.shoucang {
  margin-top: 20px;
  width: 335px;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  img {

    width: 110px;
    height: 110px;
    margin-right: 5px;
  }
  .title1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .score {
      // font-weight: bold;
      margin-bottom: 0;
    }
    .author {
      font-size: 14px;
      margin-bottom: 0;
    }
    .name {
      margin-bottom: 0;
      width: 230px;
      font-size: 24px;
      font-weight: bold;
      color: black;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
 button {
 
      float: right;
      margin-top: -110px;
      border-radius: 50%;
      background:rgb(165, 163, 163);
      border: 0;
      outline: none;
    }
    // .del{
    //   width: 40px;
    //   height: 40px;
    // }
</style>